
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<DOCTYPE html>
<!-- html -->
<html>
<!-- head -->
<head>
    <title>订单查询</title>
    <link href="<%=basePath%>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><!-- bootstrap-CSS -->
    <link href="<%=basePath%>css/font-awesome.css" rel="stylesheet" type="text/css" media="all" /><!-- Fontawesome-CSS -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type='text/javascript' src='<%=basePath%>js/jquery-2.2.3.min.js'></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <!-- metatags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Online Recharge Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />



</head>
<!-- /head -->
<!-- body -->
<body>

<header>
    <%@include file="Top.jsp"%>
</header>
<!-- innerbanner -->
<div class="agileits-inner-banner">

</div>
<!-- //innerbanner -->

<!-- breadcrumbs -->
<div class="w3layouts-breadcrumbs text-center">
    <div class="container">
        <span class="agile-breadcrumbs"><a href="index.html"><i class="fa fa-home home_1"></i></a>  <span>订单查询</span></span>
    </div>

</div>
<!-- //breadcrumbs -->
<!-- Buses-list -->
<div class="agile-bus-list w3layouts-content">
    <div class="container">
        <!--bus-single -->
        <h3 class="w3-head">订单查询</h3>
        <!-- bus-routes -->
        <div class="bus-tp">
            <div class="bus-tp-inner">
                <h3>订单列表</h3>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- /bus-routes -->
        <div class="w3agile bus-midd">
            <div class="table-responsive">
                <table class="table table-bordered agileinfo">

                    <tbody>
                    <tr>
                       <td class="wthree"><em class="icon fa fa-credit-card" aria-hidden="true"></em> 订单编号</td>
 							<td class="price us"> 交易金额</td> 
							<td class="wthree"> <em class="fa fa-clock-o"></em>时间 </td> 
							<td class="wthree">卡片id</td>						
							<td class="wthree"> 操作</td>

                    </tr>
                    <c:forEach items="${m}" var="m">
                   		<tr>
                   			<td class="wthree">${m.order_num} </td>
                   			<td class="price us">${m.money} </td>
                   			<td class="wthree">${m.time}</td>
                   				<td class="wthree">${m.card.cardId}</td>		
                   			<td class="wthree">
                   				<a href="http://localhost:8080/TopUp/Question.jsp?hisid=${m.historiesid }">对订单有疑问？</a>
                   			</td>
                   		</tr>
                   	</c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModalbook" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title">
                    Select your seat now</h4>
                <div class="main-booking">
                    <div id="seat-map">
                        <div class="front-indicator"><h3>Front</h3></div>
                    </div>
                    <div class="booking-details">
                        <div id="legend"></div>
                        <h3> Selected Seats (<span id="counter">0</span>):</h3>
                        <ul id="selected-seats" class="scrollbar scrollbar1"></ul>

                        Total: <b>$<span id="total">0</span></b>

                        <a href="pay.html"><button class="checkout-button">Pay Now</button></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var firstSeatLabel = 1;

    $(document).ready(function() {
        var $cart = $('#selected-seats'),
            $counter = $('#counter'),
            $total = $('#total'),
            sc = $('#seat-map').seatCharts({
                map: [
                    'ff_ff',
                    'ff_ff',
                    'ee_ee',
                    'ee_ee',
                    'ee___',
                    'ee_ee',
                    'ee_ee',
                    'ee_ee',
                    'eeeee',
                ],
                seats: {
                    f: {
                        price   : 100,
                        classes : 'first-class', //your custom CSS class
                        category: 'First Class'
                    },
                    e: {
                        price   : 40,
                        classes : 'economy-class', //your custom CSS class
                        category: 'Economy Class'
                    }

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return firstSeatLabel++;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'f', 'available',   'First Class' ],
                        [ 'e', 'available',   'Economy Class'],
                        [ 'f', 'unavailable', 'Already Booked']
                    ]
                },
                click: function () {
                    if (this.status() == 'available') {
                        //let's create a new <li> which we'll add to the cart items
                        $('<li>'+this.data().category+' : Seat no '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                            .attr('id', 'cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        /*
                         * Lets update the counter and total
                         *
                         * .find function will not find the current seat, because it will change its stauts only after return
                         * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                         */
                        $counter.text(sc.find('selected').length+1);
                        $total.text(recalculateTotal(sc)+this.data().price);

                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        $counter.text(sc.find('selected').length-1);
                        //and total
                        $total.text(recalculateTotal(sc)-this.data().price);

                        //remove the item from our cart
                        $('#cart-item-'+this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });

        //this will handle "[cancel]" link clicks
        $('#selected-seats').on('click', '.cancel-cart-item', function () {
            //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
            sc.get($(this).parents('li:first').data('seatId')).click();
        });

        //let's pretend some seats have already been booked
        sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');

    });

    function recalculateTotal(sc) {
        var total = 0;

        //basically find every selected seat and sum its price
        sc.find('selected').each(function () {
            total += this.data().price;
        });

        return total;
    }
</script>
<div class="phone" id="mobileappagileits">
		<div class="container">
			<div class="col-md-6">
				<img src="<%=basePath%>images/ph1.png" class="img-responsive" alt=""/>
			</div>
			<div class="col-md-6 phone-text">
				<h4>校园充手机端上线了！</h4>
               
					<div class="text-1">
						<h5>Recharge</h5>
						<p>更加简单快捷的付款方式</p>
					</div>
					<div class="text-1"> </div>
			  <div class="agileinfo-dwld-app">
							<h6>Download The App : 
								<a href="#"><i class="fa fa-android"></i></a>
							</h6>
						</div>
			</div>
          <div class="clearfix"></div>
            <div class="wthree-mobile-app"> </div>
		</div>
	</div>


<!-- //for bootstrap working -->
<!-- Seat select -->
<script src="<%=basePath%>js/jquery.seat-charts.js"></script>
<link rel="<%=basePath%>stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<!-- //Seat select -->
<!-- here stars scrolling icon -->

</body>
<!-- /body -->
</html>
